<template>
    <view class="container" v-if="queryStatus==false">
		<view class="zaozao-flex-center">
			<text>请输入车牌查询账单</text>
		</view>
		<view class="number-wrap">
			<car-number-input @numberInputResult="numberInputResult" :defaultStr="carNumber"></car-number-input>
		</view>
		<!-- <view class="number-wrap">
			<car-number v-model="carNumber"></car-number>
		</view> -->
		<view class="add-btn zaozao-flex-center"  @click="queryBill" v-if="submitStatus">
			<text>查询停车费</text>
		</view>
		<view class="add-btn-disabled zaozao-flex-center"  v-else>
			<text>查询停车费</text>
		</view>
    </view>
	<view class="container" v-else>
		
		<view style="margin-top:100rpx;background-color: #fff;">
			<view class="line"></view>
			<view class="zaozao-row zaozao-col-center bill-item" style="height: 100rpx;">
				<view style="width: 160rpx;padding-left:24rpx;">
					停车场
				</view>
				<view class="zaozao-row zaozao-row-right" style="width: 590rpx;padding-right:48rpx;">
					{{billInfo.parkingName}}
				</view>
			</view>
			<view  class="line"></view>
			<view class="zaozao-row zaozao-col-center" style="height: 100rpx;">
				<view style="width: 160rpx;padding-left:24rpx;">
					车牌号
				</view>
				<view class="zaozao-row zaozao-row-right" style="width: 590rpx;padding-right:48rpx;">
					{{billInfo.plateNumber}}
				</view>
			</view>
			<view  class="line"></view>
			<view class="zaozao-row zaozao-col-center" style="height: 100rpx;">
				<view style="width: 160rpx;padding-left:24rpx;">
					进场时间
				</view>
				<view class="zaozao-row zaozao-row-right" style="width: 590rpx;padding-right:48rpx;">
					{{billInfo.inTime}}
				</view>
			</view>
			<view  class="line"></view>
			<view class="zaozao-row zaozao-col-center" style="height: 100rpx;">
				<view style="width: 160rpx;padding-left:24rpx;">
					账单金额
				</view>
				<view class="zaozao-row zaozao-row-right" style="width: 590rpx;padding-right:48rpx;">
					￥<text style="color:red;font-size: 32rpx;font-weight: 700;" >{{billInfo.upayFee}}</text>
				</view>
			</view>
			<view  class="line"></view>
		</view>
		<view class="add-btn zaozao-flex-center"  @click="pay" v-if="submitStatus" style="margin-top:60rpx;">
			<text>立即支付</text>
		</view>
		
	</view>
  </template>

<script>
    import CarNumber from '@/components/codecook-carnumber/codecook-carnumber.vue';
	import {getMoney,createOrder} from "@/api/bill.js";
    export default {
		components: {
			CarNumber
		},
		data() {
			return {
				carNumber: '浙A',
				submitStatus:false,
				//支付类型 APP/WECHAT_MP/H5/NATIVE app/微信小程序/h5/二维码
				paymentType: "",
				billInfo:{},
				payInfo:{},
				queryStatus:false,
			}
		},
		watch: {
			carNumber(num) {
				if(num.length>=7){
					this.submitStatus=true;
				}else{
					this.submitStatus=false;
				}
			},
		},
		onShow(){
			
		},
		methods: {
			numberInputResult(num){
				this.carNumber=num;
				console.log('结果--'+num)
			},
			queryBill(){
				
				getMoney({plateNumber:this.carNumber}).then((res)=>{
					if(res.data.code==0){
						this.billInfo=res.data.data;
						this.queryStatus=true;
					}else{
						uni.showToast({
							title:res.data.msg,
							duration:2000,
							icon:"error"
						})
					}
				})
				console.log(this.carNumber);  
			},
			pay(){
				createOrder(this.billInfo).then((res)=>{
					if(res.data.code==0){
						uni.requestPayment({
							provider: "alipay",
							orderInfo: res.data.trade_no,
							success: (e) => {
								console.log("success",e);
								if(e.resultCode==6001){
									console.log("用户取消支付");
									
									uni.showToast({
										icon: "none",
										title: "用户取消支付!",
									});
								}else{
									uni.showModal({
										title:"提示",
										content:"已缴费，请15分钟内离场，否则开始计算费用。",
										showCancel:false,
										success: function (res) {
											if (res.confirm) {
												uni.redirectTo({
													url: `/pages/index/index`
												});
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
									return ;
								}
								
								
							},
							fail: (error) => {
								console.log(error);
								uni.hideLoading();
								uni.showModal({
									content: "支付失败,如果您已支付，请勿反复支付",
									showCancel: false,
								});
							},
						});
					}
				})
			},
			pay2(paymentType){
				uni.requestPayment({
					provider: paymentType,
					orderInfo: payForm || '',
					success: (e) => {
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							title: "支付成功!",
						});
						this.callback(paymentMethod)
					},
					fail: (e) => {
						console.log(this);
						this.exception = e;
						uni.hideLoading();
						uni.showModal({
							content: "支付失败,如果您已支付，请勿反复支付",
							showCancel: false,
						});
					},
				});
			}
		},
		beforeMount() {
		},
	}
</script>  

<style scoped lang="less">
	.container{
		background-color: #fcfcfc;
	}
	.line{
		height: 1px;
		background-color: #ccc;
		width: 750rpx;
	}
    .number-wrap {
      padding: 30rpx;
    }
	.add-btn{
		width: 702rpx;
		height: 80rpx;
		background: rgba(64, 199, 184);
		border-radius: 156rpx;
		opacity: 1;
		margin-left:24rpx;
		color:white;
	}
	.add-btn-disabled{
		width: 702rpx;
		height: 80rpx;
		background: rgba(64, 199, 184,0.3);
		border-radius: 156rpx;
		opacity: 1;
		margin-left:24rpx;
		color:white;
	}
</style>